<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
        <template>
            <div style="font-size: 16px;display: flex;justify-content:space-around;flex-wrap: wrap;width: 700px;">
            <div v-model="entity.id" v-for="item in parkStatusList" :label="item.id" :key="item.id">
                <div v-if="item.spaceId === nearSpace && item.status==='空位'" style="border: 1px solid #01AAED;border-radius: 10px;width: 120px;height: 30px">
                    <input  type="radio" checked :id="item.id" :value="item.id" @change="change(item.id)" name="aa">
                    <span style="color: #01AAED">{{ item.spaceId }}</span>
                    </input>
                </div>
                <div v-else-if="item.status==='空位'" style="border: 1px solid #01AAED;border-radius: 10px;width: 120px;height: 30px">
                    <input  type="radio" :id="item.id" :value="item.id" @change="change(item.id)" name="aa">
                    <span style="color: #01AAED">{{ item.spaceId }}</span>
                    </input>
                </div>
                <div v-else-if="item.status==='占用'" style="border: 1px solid red;border-radius: 10px;width: 120px;height: 30px">
                    <input disabled type="radio" :id="item.id" :value="item.id" @change="change(item.id)" name="aa">
                    <span style="color: red">{{ item.spaceId }}</span>
                    </input>
                </div>
                <div v-else style="border: 1px solid #ff9300;border-radius: 10px;width: 120px;height: 30px">
                    <input disabled type="radio" :id="item.id" :value="item.id" @change="change(item.id)" name="aa">
                    <span style="color: #ff9300">{{ item.spaceId }}</span>
                    </input>
                </div>
            </div>
            </div>
            <!--        <RadioGroup v-model="entity.id" @change="change" style="font-size: 16px" type="button">-->
            <!--            <Radio v-for="item in parkStatusList" :label="item.id" :key="item.id">-->

            <!--            </Radio>-->
            <!--        </RadioGroup>-->
            <!--        :style="randomRgb(item)"-->
        </template>


</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
    var vm = new Vue({
        el: '#app',
        data:{
            entity:{

            },
            okUtils:null,
            okLayer:null,
            parkStatusList:[],
            parkId:'',
            nearSpace:'',
            plateNumber:'',
        },
        methods: {
            load : function(){
                console.log(vm.entity.parkId);
                layui.use(["okUtils", "okLayer"], function () {
                    vm.okUtils = layui.okUtils;
                    vm.okLayer = layui.okLayer;
                    vm.okUtils.ajaxCloud({
                        url:"/app/parkStatus/listByParkId",
                        param : {parkId : vm.entity.parkId},
                        close : false,
                        success : function(result) {
                            vm.parkStatusList = result.msg;
                            console.log(vm.parkStatusList);
                        }
                    });
                });
            },
            acceptClick : function(dialog){
                if (vm.entity.id != undefined) {
                    vm.okUtils.ajaxCloud({
                        url:"/app/parkStatus/save",
                        param : {id : vm.entity.id,plateNumber : vm.plateNumber},
                        close : false,
                        success : function(result) {
                            vm.okLayer.msg.greenTick(result.msg)
                            dialog.close();
                        }
                    });
                }
            },
            change(id){
                console.log(vm.entity);
                console.log(id);
                vm.entity.id = id;
                console.log(vm.entity.id);
            }
        },
        created: function() {

        }
    });
</script>
</body>
</html>